<template>
  <my-div class="create">
    <head title="导入钱包"></head>
    <my-div class="my-tab">
      <div class="my-tab-item"  @click="tab(0)">
          <text :style="{color:this.isActive(0)}" style="font-size:30px;margin-top:28px;">助记词</text>
          <div class="my-tab-border" :style="{'background-color':this.isActive(0)}"></div>
      </div>
      <div class="my-tab-item"  @click="tab(1)">
        <text :style="[{color:this.isActive(1)}]" style="font-size:30px;margin-top:28px;">私钥</text>
        <div class="my-tab-border" :style="{'background-color':this.isActive(1)}"></div>
      </div>
    </my-div>
    <my-div class="word-attention" day_bg="rgba(233, 233, 233, 1)">
      <text style="color:rgba(154,156,164,1);font-size:24px;margin-left:30px;">使用助记词导入的同时可以修改钱包密码</text>
    </my-div>
    <div class="word-c" v-if="index === 0">
      <textarea v-model="form.word"  placeholder="请输入助记词，用空格分隔" class="zhujici"></textarea>
    </div>
    <div class="word-c" v-if="index === 1">
      <textarea v-model="form.master_seed"  placeholder="请输入私钥" class="zhujici"></textarea>
    </div>
    <div class="create-form">
      <div class="sub_title">
        <text style="font-size:28px;color:rgba(70,70,70,1)">钱包密码</text>
      </div>
      <div class="login-input">
        <input :color='inputText.color' type="password" :placeholder="$t('wallet.pw')" class="login-input-inner" @blur="check_pw(form.pw)" v-model="form.pw" />
        <text class="view_pw" style="font-size:28px;color:rgba(19,32,63,1)">{{pw_strength}}</text>
      </div>
      <div class="login-input">
        <input :color='inputText.color' :type="input_type" :placeholder="$t('wallet.r_pw')" class="login-input-inner" v-model="form.r_pw" />
        <image class="view_pw" style="width:40px;height:20px;" src="root:img/create/biyan@2x.png" @click="toggle_type"></image>
      </div>
    </div>
    <div class="login-btn" @click="import_word" >
      <text style="color:#ffffff;font-size:24px;text-align: center;line-height:74px;
      ">开始导入</text>
    </div>
  </my-div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      input_type:'password',
      pw_strength:'',
      form:{
        word:'',
        pw:'',
        r_pw:'',
        master_seed:''
      },
      index:0
    }
  },
  created() {
    // GWEN BRAE MARS CAGE CUB FUN HIT BYTE TIDE BON MYTH BECK
  },
  methods: {
    // 切换表单类型
    toggle_type(){
      if(this.input_type === 'text'){
        this.input_type = 'password'
      }else {
        this.input_type = 'text'
      }
    },
    // 检测密码强度
    check_pw(val){
      var aLvTxt = ['','低','中','高'];
      var lv = 0;
      if(val.match(/[a-z]/g)){lv++;}
      if(val.match(/[0-9]/g)){lv++;}
      if(val.match(/(.[^a-z0-9])/g)){lv++;}
      if(val.length < 6){lv=0;}
      if(lv > 3){lv=3;}
      this.pw_strength = aLvTxt[lv]
    },
    tab(index){
      this.index = index
    },
    isActive(index){
      return index === this.index ? 'rgba(70,120,245,1)':'rgba(154,156,164,1)'
    },
    // 创建钱包
    import_word(){
      if(!this.form.word&&!this.form.master_seed) return this.toast('请输入助记词或私钥')
      if(!this.form.pw) return this.toast(this.$t('common.null')+this.$t('wallet.pw'))
      if(!this.form.r_pw) return this.toast(this.$t('common.please')+this.$t('wallet.r_pw'))
      if(this.form.pw!==this.form.r_pw) return this.toast(this.$t('common.equal'))
       var pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;//8到16位数字与字母组合
      if(!pwdReg.test(this.form.pw)) return this.toast('密码必须设置为8到16位数字与字母组合')
      const device = weex.requireModule('device')
      const pref = weex.requireModule('pref')
      const ac = pref.get('account') || {}
      const p = {
        "zjc":this.form.word.trim(),
        "master_seed":this.form.master_seed.trim(),
        "device_id":device.deviceId()
      }
      const key = 'ac'+ new Date().getTime()
      this.$http.post('wallet/getWalletByZJC',p,(res)=>{
        const l = Object.keys(ac).filter((key)=>{
          return ac[key].wallet.master_seed === this.form.master_seed
                ||ac[key].wallet.master_key === this.form.word
        })
        if(l.length>0){
          pref.setString('current_user_key',l[0])
        }else{
          ac[key] = {
          is_sure:true,
          user:{
            name:res.result.name,
            pw:this.form.pw,
            avatar:res.result.avatar || '',
            nickname:res.result.nickname || ''
          },
            wallet:res.result
          }
          pref.set('account',ac)
          pref.setString('current_user_key',key)
        }
        
          let nav=weex.requireModule('navigator')
          nav.pushFull({url:'root:pages/home/index.js',preload:true})
      })
    }
  }
}
</script>
<style scoped>
.create{
  width: 750px;
  flex: 1;
  /* position: absolute; */
  /* top: 0;
  bottom: 0;
  left: 0; */
}
.sub_title{
  margin-left: 30px;
}
.word-attention{
  width:750px;
  height:100px;
  display: flex;
  flex-direction: row;
  align-items: center;

}
.word-c{
  width: 690px;
  background-color: rgba(70,120,245,0.1);
  padding-top: 44px;
  padding-left: 18px;
  padding-bottom: 44px;
  margin-top: 28px;
  border-radius: 20px;
  padding-right: 18px;
  min-height: 210px;
  margin-left: 30px;
}
.zhujici{
  font-size: 28px;
  color: rgba(102,102,102,1);
  line-height: 48px;
}
.create-form{
  margin-top: 92px;
}
.login-input{
  width: 690px;
  margin-left: 30px;
  height: 90px;
  border-bottom-width: 1px;
  border-bottom-color: rgba(233,233,233,1);
  border-bottom-style: solid;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.login-input-inner{
  width: 620px;
  font-size: 28px;
  height: 90px;
}
.login-btn{
  width: 690px;
  height: 80px;
  background-color: rgba(70,120,245,1);
  margin-top: 100px;
  border-radius: 10px;
  position: absolute;
  bottom: 140px;
  left: 30px;
}
.my-tab{
  width: 750px;
  height: 90px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* background-color: aquamarine; */
}
.my-tab-item{
  width: 250px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.my-tab-border{
  width: 28px;
  height: 1px;
  margin-top: 20px;
  background-color: rgba(154,156,164,1);
  /* background-color: rgba(70,120,245,1); */
}
</style>
